<template>
    <div class="basicWrapper">
        <el-row :gutter="20">
            <el-col :span="12">
                <h2 class="formH2">修改密码</h2>
                <span @click="handleBack()" class="handleBack">返回基本信息</span>
                <el-form :model="form" status-icon :rules="rules" ref="form" label-width="100px" class="demo-form">
                    <el-form-item label="旧密码" prop="oldPassword">
                        <el-input v-model="form.oldPassword" type="password" show-password maxlength="16"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPassword">
                        <el-popover placement="right" trigger="focus" width="240">
                            <p v-show="passwordIndex == -1">
                                请至少输入6个字符。请不要使用容易被猜到的密码。
                            </p>

                            <div v-show="passwordIndex == 0">
                                <p style="font-size: 16px; color: #e47470">强度：太短</p>
                                <el-progress :percentage="50" status="exception"></el-progress>
                                <p style="padding-top: 5px">
                                    请至少输入6个字符。请不要使用容易被猜到的密码。
                                </p>
                            </div>

                            <div v-show="passwordIndex == 1">
                                <p style="font-size: 16px; color: #e47470">强度：弱</p>
                                <el-progress :percentage="50" status="exception"></el-progress>
                                <p style="padding-top: 5px">
                                    请至少输入6个字符。请不要使用容易被猜到的密码。
                                </p>
                            </div>

                            <div v-show="passwordIndex >= 2">
                                <p style="font-size: 16px; color: #7ebf50">强度：安全</p>
                                <el-progress :percentage="100" status="success"></el-progress>
                                <p style="padding-top: 5px">
                                    请至少输入6个字符。请不要使用容易被猜到的密码。
                                </p>
                            </div>
                            <el-input slot="reference" type="password" v-model="form.newPassword" maxlength="16"
                                show-password></el-input>
                        </el-popover>
                    </el-form-item>
                    <el-form-item label="确认新密码" prop="checkPass">
                        <el-input type="password" v-model="form.checkPass" autocomplete="off" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="submitForm()">立即修改</el-button>
                    </el-form-item>
                </el-form>
            </el-col>

        </el-row>
    </div>
</template>
<script>
import { changePwd } from "@/request/api/user"
import rulesUtil from "@/utils/rules"
export default {

    data() {
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.form.newPassword) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            form: {
                newPassword: "",
                checkPass: "",
                oldPassword: "",
            },
            passwordIndex: -1,
            avatar: '',//头像
            imgUrl: '',
            rules: {
                newPassword: [
                    { required: true, validator: rulesUtil.FormValidate.Form().validatePsdReg, trigger: "blur" },
                ],
                checkPass: [
                    { required: true, validator: validatePass2, trigger: "blur" },
                ],
                oldPassword: [{ required: true, message:'请输入就密码', trigger: "blur" }],
            },
            loading: true
        }
    },
    created() {
        // this.getInfo()
    },
    watch: {
        "form.newPassword": {
            handler: function (val, oldVal) {
                if (val.length == "") {
                    this.passwordIndex = -1;
                } else {
                    this.passwordIndex = this.checkPassWord(val);
                }
            },
        },
    },
    methods: {
        checkPassWord(value) {
            // 0： 表示第一个级别 1：表示第二个级别 2：表示第三个级别
            // 3： 表示第四个级别 4：表示第五个级别
            var modes = 0;
            if (value.length < 6) {
                //最初级别
                return modes;
            }
            if (/\d/.test(value)) {
                //如果用户输入的密码 包含了数字
                modes++;
            }
            if (/[a-zA-Z]/.test(value)) {
                //如果用户输入的密码 包含了字母
                modes++;
            }
            // if (/[A-Z]/.test(value)) {
            //     //如果用户输入的密码 包含了大写的A到Z
            //     modes++;
            // }
            if (/\W/.test(value)) {
                //如果是非数字 字母 下划线
                modes++;
            }
            switch (modes) {
                case 1:
                    return 1;
                    break;
                case 2:
                    return 2;
                    break;
                case 3:
                    return 3;
                    break;
            }
        },
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    // 修改密码
                    // var newcryptoPwd = aesEncrypt(this.ruleForm.newPassword);
                    // var oldPwdCrypto = aesEncrypt(this.ruleForm.oldPassword);
                    // let params = {
                    //     userId: this.ruleForm.userId,
                    //     newPassword: newcryptoPwd,
                    //     oldPassword: oldPwdCrypto,
                    // }
                    delete this.form.checkPass
                    changePwd(this.form).then((res) => {
                        if (res.data.code ==200) {
                            this.$message({
                                message: "修改密码成功，请使用新密码进行重新登录！",
                                type: "success",
                            });
                            this.dialogFormVisible = false;
                            window.sessionStorage.clear();
                            setTimeout(() => {
                                this.$router.push("/login");
                            }, 1200);
                        } else {
                            this.$message.error(res.data.message);
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        // 返回
        handleBack(){
            // this.$router.push("/basicInfo");
            this.$emit('handleBackf')
        }
    }
}
</script>
<style lang="less" scoped>
@import "./basicInfo.less";
/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
}

.uploadTip {
    color: #666;
    font-size: 14px;
    margin-top: 20px;
}

.uploadTitle {
    font-size: 16px;
    color: #606266;
}

.formRight {
    text-align: center;
    padding-top: 100px;
}

.demo-form {
    margin-top: 20px;
}

</style>

